/*Created by lk on 2020/07/29.*/

/*----banner----*/
.banner{width: 100%; position: fixed; top: 0; overflow: hidden}
.banner .swiper-slide{width: 100%; height: 100%; background-position: center; background-size: cover}
.banner .img{width: 100%; height: 100%; background-position: center; background-size: cover}

.banner .txt{position: absolute; left: 14%; top: 36%; z-index: 2}
.banner .txt1{top: 26%;}
.banner .txt h3{margin-bottom: 16px; transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s .8s; -webkit-transition: all ease .4s .8s}
.banner .txt p{transform: translateX(80px); -webkit-transform: translateX(80px); opacity: 0; transition: all ease .4s 1s; -webkit-transition: all ease .4s 1s }

.banner .swiper-slide-active .txt h3{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}
.banner .swiper-slide-active .txt p{transform: translateX(0); -webkit-transform: translateX(0); opacity: 1}

.banner .swiper-button-prev, .banner .swiper-button-next{}


.mark{width: 100%; height: 820px; position: relative;}


/*----content----*/
.content{position: relative; background: #fff; z-index: 3}


.title{text-align: center; margin-bottom: 60px}
.title h1{font-size: 26px; color: #282828; font-weight: bold; margin-bottom: 6px; letter-spacing: 1px}
.title p{font-size: 15px; color: #666;}

/*----list01----*/
.list01{position: relative; padding: 80px 0}
.list01 .list01_con .list{margin-right: -2%}
.list01 .list01_con .list li{width: 31.3333%; float: left; margin-right: 2%; position: relative}
.list01 .list01_con .list li:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0); position: absolute; top: 0; left: 0;}
.list01 .list01_con .list li .img{width: 100%; overflow: hidden; position: relative;}
.list01 .list01_con .list li .img img{width: 100%; transition: all ease .4s; -webkit-transition: all ease .4s}
.list01 .list01_con .list li .t{text-align: center; padding: 18px 10px 0 10px; position: relative; transition: all ease .4s; -webkit-transition: all ease .4s; z-index: 2}
.list01 .list01_con .list li .t h1{font-size: 20px; color: #181818; margin-bottom: 10px}
.list01 .list01_con .list li .t p{font-size: 14px; color: #666; line-height: 22px}

.list01 .list01_con .list li .img:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 1;  transition: all ease .4s; -webkit-transition: all ease .4s}

.list01 .list01_con .list li:hover .img:before{background: rgba(0,0,0,.6)}
.list01 .list01_con .list li:hover .img img{transform: scale(1.1); -webkit-transform: scale(1.1)}
.list01 .list01_con .list li:hover .t{transform: translateY(-180px); -webkit-transform: translateY(-180px)}
.list01 .list01_con .list li:hover .t h1{color: #fff;}
.list01 .list01_con .list li:hover .t p{color: #fff;}


/*----list02----*/
.list02{position: relative; padding: 120px 0 140px 0; overflow: hidden}
.list02:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; z-index: 1}
.list02 .list02_con{padding: 0 0 100px 0; text-align: center; position: relative; z-index: 2}
.list02 .list02_con h1{font-size: 28px; color: #fff; margin-bottom: 40px; letter-spacing: 1px}
.list02 .list02_con p{font-size: 14px; color: #fff; line-height: 24px; font-weight: 100}
.list02 .list02_con .link{width: 120px; font-size: 14px; color: #fff; padding: 10px 20px; text-align: center; margin: 80px auto 0 auto; border: 1px solid #fff; transition: all ease .4s; -webkit-transition: all ease .4s}

.list02 .list02_list{position: relative; z-index: 2}
.list02 .list02_list .list{}
.list02 .list02_list .list li{width: 14.2%; float: left; cursor: pointer}
.list02 .list02_list .list li .img{width: 66px; height: 66px; margin: 0 auto 10px auto; transition: all ease .4s; -webkit-transition: all ease .4s}
.list02 .list02_list .list li .img img{float: none; display: block}
.list02 .list02_list .list li p{font-size: 14px; color: #fff; text-align: center; font-weight: 100; padding: 0 24px}

#bottle>div:nth-of-type(1){background: url(../image/img12.jpg) 50% 0 no-repeat fixed; margin: 0; height: 1080px; position:absolute; top:0; left:0; width:100%;}

.list02 .list02_con .link:hover{width: 140px}

.list02 .list02_list .list li:hover .img{transform: rotateY(360deg); -webkit-transform: rotateY(360deg)}

/*----list03----*/
.list03{padding: 80px 0}
.list03 .list{margin-right: -1%}
.list03 .list li{width: 49%; float: left; margin-right: 1%; margin-bottom: 10px;}
.list03 .list li .li_con{position: relative;}
.list03 .list li .li_con .img{width: 100%; overflow: hidden}
.list03 .list li .li_con .img img{width: 100%}
.list03 .list li .li_con .t{width: 100%; position: absolute; top: 0; left: 0; padding: 50px 0 0 60px; z-index: 2}
.list03 .list li .li_con .t h1{font-size: 20px; color: #181818; font-weight: bold; margin-bottom: 4px; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list li .li_con .t p{font-size: 15px; color: #333; transition: all ease .4s; -webkit-transition: all ease .4s}
.list03 .list li .li_r .t{text-align: right; padding: 50px 60px 0 0}

.list03 .list li .li_con:before{content: ""; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0); position: absolute; top: 0; left: 0; z-index: 1; transition: all ease .6s; -webkit-transition: all ease .6s}

.list03 .list li:hover .li_con:before{background: rgba(0,0,0,.6)}

.list03 .list li:hover .li_con .t h1{color: #fff;}
.list03 .list li:hover .li_con .t p{color: #fff;}